/* eslint-disable react-hooks/rules-of-hooks */
import React from "react";
import styles from "./css/home.module.css";
import { CityDwApi } from "../../../api/city";
import { LocationFill } from "antd-mobile-icons";
import { useLoaderData, useNavigate } from "react-router-dom";
import { Button, SearchBar, Swiper } from "antd-mobile";
import { getSwiperApi } from "../../../api/swiper";
import { useSelector } from "react-redux";
function index() {
  const { dw } = useLoaderData();
  const {SiperList}=useLoaderData()
  const start=useSelector(store=>store.ticket.start)
  const end=useSelector(store=>store.ticket.end)
  let nav=useNavigate()
  return (
    <div className={styles.box}>
      <div className={styles.box1}>
        <div className={styles.top1}>
          <span >
            <LocationFill />
            {dw}
          </span>
          <div className={styles.top2}>
            <SearchBar placeholder="搜索目的地/景点/线路" />
            <Button className={styles.btns} fill="solid">
              搜索
            </Button>
          </div>
        </div>
       
      </div>
       <div>
          <span onClick={()=>nav('/city/start')}>{start}</span>
          <span>→</span>
          <span onClick={()=>nav('/city/end')}>{end}</span>
          </div>
      <div className={styles.box2}>
        <div className={styles.row1}>
            <span>旅游</span>
            <span>跟团游</span>
            <span>自由行</span>
            <span>定制包团</span>
            <span>自驾游</span>
        </div>
        <div className={styles.row2}>
            <span>票务</span>
            <span onClick={()=>nav('/list')}>景区门票</span>
            <span>机票</span>
            <span>火车票</span>
            <span>汽车·传票</span>
        </div>
        <div className={styles.row3}>
            <span>住宿</span>
            <span>酒店</span>
            <span>海外住宿</span>
            <span>民宿·公寓</span>
            <span>钟点房</span>
        </div>
      </div>
      <div className={styles.box3}>
        {
            SiperList.map((item)=>{
                return <Swiper className={styles.image} key={item.id}>{item.image}</Swiper>
            })
        }
         
         
        
      </div>
    </div>
  );
}

export default index;
export const loader = async () => {
  const { data: res } = await CityDwApi();
  const {data:res1}=await getSwiperApi()
  console.log(res1);
  
  return { dw: res.city,SiperList:res1 };
};
